<template>
	<div id="app">
		<!--应用程序栏-->
		<v-app-bar app color="#FF5252">
			<v-list-item-title style="text-align: center;font-size:18px;color:white">收货地址</v-list-item-title>
			<v-btn elevation="0" small color="#FF5252" router-link :to="{ path: '/main/mine' }" class="go_back">
				<icon name="back" scale="2" color="white"></icon>
			</v-btn>
		</v-app-bar>
		<div style="padding-top: 2vh;margin: 0 auto;text-align: center;width: 80%;">
			<!-- 		<button class="top_button" @click="go_add()">+添加</button> -->

			<v-btn block color="#FF5252" class="top_button" @click="go_add()">
				+添加
			</v-btn>
		</div>
		<div style="padding-top: 2vh">
			<v-divider></v-divider>
		</div>
		<div v-for="item in address_item" :key="item.id">
			<v-col style="padding:0;margin: 0">
				<v-list-item three-line style="width: 100%;">
					<v-list-item-content>
						<v-list-item-title class="headline mb-1"><span style="font-size: 16px;">{{item.name}}&nbsp; {{item.phone}}</span></v-list-item-title>
						<v-list-item-subtitle>{{item.address}}</v-list-item-subtitle>
						<div class="overline" style="color:gray;text-align: right;vertical-align: middle;">
							<div style="float: right;">
								<icon name="delete_three" scale="1"></icon><span style="margin-left: 1vw;color:#ff5252" @click="del(item.id)">删除</span>
							</div>
							<div style="float: right;margin-right: 2vw;">
								<icon name="edit" scale="1"></icon><span style="margin-left: 1vw;" @click="go_add(item.id)">编辑</span>
							</div>
						</div>
					</v-list-item-content>
				</v-list-item>
			</v-col>
			<v-divider></v-divider>
		</div>
		<v-snackbar v-model="snackbar" bottom :timeout="timeout">
			{{ message }}
		</v-snackbar>
	</div>
</template>

<script>
	import axios from "axios";

	export default {
		name: "Address",
		data() {
			return {
				address_item: [],
				message:'',
				timeout:1000,
				snackbar:false
			}
		},
		methods: {
			go_add(id) {
				this.$router.push({
					name: "添加收货地址",
					query: {
						address_id: id
					}
				});
			},
			goLogin() {
				setTimeout(function() {
					this.$router.replace({
						path: "/login"
					});
				}, 1000);
			},
			del(address_id){
				let _this = this;
				axios
					.delete("/api/v1.0/users/delete_address",{
						params:{
							address_id:address_id
						}
					})
					.then(function(response) {
						if (response.data.errno == '0') {
							_this.snackbar = true;
							_this.message = response.data.errmsg;
							console.log(response.data);
							setTimeout(function(){
								_this.$router.go(0)
							})
						} else if (response.data.errno === '4101') {
							// 未登跳转到登录页面
							_this.goLogin()
						}else{
							_this.snackbar = true;
							_this.message = response.data.errmsg+"，当前地址包含在兑换订单中的地址";
						}
					})
					.catch(function() {
						_this.message = "连接服务器失败！";
					});
			}
		},
		mounted() {
			let _this = this;
			axios
				.get("/api/v1.0/users/get_address")
				.then(function(response) {
					if (response.data.errno === '0') {
						_this.address_item = response.data.data
						console.log(response.data.data)
					} else if (response.data.errno === '4101') {
						// 未登跳转到登录页面
						_this.goLogin()
					}
				})
				.catch(function() {
					_this.message = "连接服务器失败！";
				});
		}
	}
</script>

<style scoped>
	.top_button {
		font-size: 15px;
		background: #FF5252;
		height: 4vh;
		text-align: center;
		color: #FFFFFF;
	}
</style>
